<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>move</title>

    <style>
        *{margin: 0;padding: 0;}
        #div1{
            height: 100px;width: 100px;position: absolute;background-color: black;border-radius: 50%;
        }
        div{
            height: 10px;width: 10px;background-color: black;border-radius: 50%;position: absolute;
        }
    </style>
    <script>
        //鼠标拖动箱子拖动的情况.
            window.onload=function(){
                var oDiv=document.getElementById('div1');
                window.onmousemove=function(ev){
                    var e=ev||window.event;
                    oDiv.style.left=e.clientX+20+'px';
                    oDiv.style.top=e.clientY+20+'px';
                }
            }

        //下面为鼠标拖动后有球球的情况
        // window.onload=function(){
        //     var oDiv=document.getElementsByTagName("div");
        //     document.onmousemove=function(ev){
        //          var e=ev||window.event;
        //          for(i=oDiv.length-1;i>0;i--){
        //             oDiv[i].style.left=oDiv[i-1].offsetLeft + 'px'; //让后一个球紧跟着前一个的情况。
        //             oDiv[i].style.top=oDiv[i-1].offsetTop  + 'px';
        //          }
        //          oDiv[0].style.left=e.clientX+'px';  //第一个球的情况.
        //          oDiv[0].style.top=e.clientY+'px';
        //    }
        //}
    </script>
</head>
<body>
    <div id='div1'></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>